<!-- 购物车 -->
<template>
  <div class="cart">
    <div class="top">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>购物车</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="cont">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          label="全选"
          width="55"
          change="getSelected"
        ></el-table-column>
        <el-table-column label="商品信息" align="center" width="600">
          <template slot-scope="scope">
            <div class="item-wares">
              <img :src="scope.row.picture" alt="" />
              <div>
                <p class="item-p-title">{{ scope.row.name }}</p>
                <p class="item-p-span">
                  规格:

                  <el-dropdown>
                    <span class="el-dropdown-link">
                      下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>颜色</el-dropdown-item>
                      <el-dropdown-item>尺码</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" width="120">
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="数量"
          align="center"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-input-number
              size="small"
              v-model="scope.row.count"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          prop="sum"
          label="小计"
          width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <p>￥{{ scope.row.price * scope.row.count }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="handle" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" @click="open">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      
      <div class="bot-l">
        <p>全选</p>
        <p>删除商品</p>
        <p>移入收藏夹</p>
        <p>清空失效商品</p>
      </div>
      <div class="bot-r" >
        <p>共{{tableData.length}}件商品，已选择{{multipleSelection.length}}件商品，商品合计：￥{{getallprice}}</p>
        <a @click="goAccounts">
          <el-button type="primary">结算</el-button>
        </a>
        
      </div>
    </div>
  </div>
</template>
  
  <script>
const cityOptions = [""];
export default {
  name: "cart",
  components: {},
  computed:{
    getallprice(){
        return eval(this.multipleSelection.map(item=>item.price*item.count).join('+'))
    },
  },
  methods: {
    goAccounts(){
      this.$store.commit('setSelection',this.multipleSelection)
      this.$router.push('accounts')
    },  
    getCart() {
      // 获取购物车列表数据
      this.$axios.get("/member/cart").then((res) => {
        this.tableData = res.data.result;
        console.log(res);
        console.log(this.tableData);
      });
    },
    // 全选
    getSelected() {},
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          // 删除
          this.$axios({
            type: "delete",
            url: "/member/cart",
            data: {
              ids: "",
              clearAll: true,
              clearInvalid: true,
            },
          }).then((res) => {
            // this.tableData = res.data.result;
            console.log(res);
            this.getCart()
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$axios({
        type: "put",
        url: "/member/cart/selected",
        data: {
          selected: true,
          ids:''
        },
      }).then((res) => {
        console.log(res);
      });
      console.log(this.multipleSelection)
    },
  },
  mounted() {
    this.getCart();
  },
  data() {
    return {
      num3: 1,
      checkAll: false,
      checkedCities: [""],
      cities: cityOptions,
      isIndeterminate: true,
      tableData: [

      ],
      multipleSelection: []
    };
  },
};
</script>
  
  <style lang="less" scoped>
.top {
  padding: 10px 0 20px;
}
.cart {
  width: 1240px;
  margin: 0 auto;
  position: relative;
  // background: #f5f5f5;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-checkbox__label {
  font-size: 28px !important;
}
.con-top {
  display: flex;
  justify-content: space-between;
  padding: 40px 0;
  font-size: 18px;
}
.item {
  display: flex;
  justify-content: space-between;
}
.item-wares {
  display: flex;
  align-items: center;
  img {
    width: 100px;
    height: 100px;
  }
  .item-p-title {
    font-size: 16px;
    color: #666;
    padding: 5px 5px;
  }
  .item-p-span {
    // float: left;
  }
}
// 购物车底部结算 css样式 开始
.bottom {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.bot-l {
  display: flex;
  p {
    padding: 15px;
  }
}
.bot-r {
  display: flex;
  align-items: center;
}
// 购物车底部结算 结束
</style>
  